<template>
  <div class="container">
    <div class="block">
      <el-carousel trigger="click" height="150px">
        <el-carousel-item v-for="(item, index) in imgBox" :key="index">
          <img :src="item['img']" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="classify">
      <span>衣服</span>
      <ul class="kindOf">
        <li @click="gotodetaile(1)">衣服</li>
        <li>衣服</li>
        <li>衣服</li>
        <li>衣服</li>
        <li>衣服</li>
        <li>衣服</li>
        <li>衣服</li>
        <li>衣服</li>
        <li>衣服</li>
        <li>衣服</li>
      </ul>
      <h2>电子产品</h2>
      <ul class="kindOf">
        <li>电子产品</li>
        <li>电子产品</li>
        <li>电子产品</li>
        <li>电子产品</li>
      </ul>
      <h2>书籍</h2>
      <ul class="kindOf">
        <li>电子产品</li>
        <li>电子产品</li>
        <li>电子产品</li>
        <li>电子产品</li>
      </ul>
      <h2>鞋子</h2>
      <ul class="kindOf">
        <li>电子产品</li>
        <li>电子产品</li>
        <li>电子产品</li>
        <li>电子产品</li>
      </ul>
      <h2>家纺</h2>
      <ul class="kindOf">
        <li>电子产品</li>
        <li>电子产品</li>
        <li>电子产品</li>
        <li>电子产品</li>
      </ul>
      <h2>厨具</h2>
      <ul class="kindOf">
        <li>电子产品</li>
        <li>电子产品</li>
        <li>电子产品</li>
        <li>电子产品</li>
      </ul>
      <h2>母婴</h2>
      <ul class="kindOf">
        <li>电子产品</li>
        <li>电子产品</li>
        <li>电子产品</li>
        <li>电子产品</li>
      </ul>
      <h2>手表</h2>
      <ul class="kindOf">
        <li>电子产品</li>
        <li>电子产品</li>
        <li>电子产品</li>
        <li>电子产品</li>
      </ul>
      <h2>手表2</h2>
      <ul class="kindOf">
        <li>电子产品33</li>
        <li>电子产品3</li>
        <li>电子产品3</li>
        <li>电子产品3</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      imgBox: [
        {
          img: require("../../../assets/image/banner01.jpg"),
        },
        {
          img: require("../../../assets/image/banner02.jpg"),
        },
        {
          img: require("../../../assets/image/banner03.jpg"),
        },
        {
          img: require("../../../assets/image/banner04.jpg"),
        },
      ],
    };
  },
  methods: {
    gotodetaile(id) {
      // this.$router.push('/index/service')
      this.$router.push({
        path: "/index/service",
        query: {
          uname: id,
        },
      });
    },
  },
};
</script>

<style scoped lang="less">
.container {
  height: 100vh;
  .block {
    width: 80%;
    margin: 0 auto;
    padding-top: 0.5rem;
    .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 150px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
  .classify {
    width: 80%;
    height: 70%;
    margin: 10px auto;
    background: #eeeeee;
    ::-webkit-scrollbar {
      width: 16px;
      height: 16px;
      background-color: #f5f5f5;
    }
    span {
      font-size: 1.5rem;
      background-image: linear-gradient(to right, orange, purple);
      -webkit-background-clip: text;
      color: transparent;
    }
    // 衣服分类
    .kindOf {
      display: flex;
      justify-content: space-around;
      width: 100%;
      li {
        width: 15%;
        font-size: 1.2rem;
        color: rgb(199, 112, 112);
      }
    }
  }
}
</style>
